/*
    创建者：shuxiaokai
    创建时间：2021-09-15 22:07
    模块名称：全局变量维护
    备注：
*/
<template>
    <div class="s-variable">
        <!-- 新增变量 -->
        <s-fieldset :title="$t('新增变量')" class="left">
            <el-form ref="form" :model="formInfo" :rules="rules" label-width="120px">
                <el-form-item :label="`${$t('变量名称')}：`" prop="name">
                    <el-input v-model="formInfo.name" :size="config.renderConfig.layout.size" :placeholder="$t('请输入变量名称')" class="w-100" maxlength="100" clearable></el-input>
                </el-form-item>
                <el-form-item :label="`${$t('变量值')}：`" prop="value">
                    <el-input v-model="formInfo.value" type="textarea" :autosize="{ minRows: 10 }" :size="config.renderConfig.layout.size" :placeholder="$t('请输入变量值')" class="w-100" maxlength="9999" clearable></el-input>
                </el-form-item>
                <el-form-item :label="`${$t('值类型')}：`" prop="type">
                    <el-select v-model="formInfo.type" :size="config.renderConfig.layout.size" class="w-100">
                        <el-option value="string" label="string"></el-option>
                        <el-option value="number" label="number"></el-option>
                        <el-option value="boolean" label="boolean"></el-option>
                    </el-select>
                </el-form-item>
                <div class="d-flex j-end">
                    <el-button :loading="loading" type="primary" @click="handleAddVariable">{{ $t("确认添加") }}</el-button>
                </div>
            </el-form>
        </s-fieldset>
        <!-- 变量列表 -->
        <s-fieldset :title="$t('变量列表')" class="right">
            <s-table
                ref="table"
                url="/api/project/project_variable"
                delete-many
                delete-url="/api/project/project_variable"
                :delete-params="{ projectId: $route.query.id }"
                :params="{ projectId: $route.query.id }"
            >
                <el-table-column :label="$t('变量名称')" align="center">
                    <template #default="scope">
                        <el-input v-if="scope.row.__active" v-model="scope.row.name" :size="config.renderConfig.layout.size" class="w-100" maxlength="100" clearable></el-input>
                        <span v-else>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('变量值')" align="center" show-overflow-tooltip>
                    <template #default="scope">
                        <el-input v-if="scope.row.__active" v-model="scope.row.value" type="textarea" :autosize="{ minRows: 10 }" :size="config.renderConfig.layout.size" class="w-100" maxlength="9999" clearable></el-input>
                        <span v-else>{{ scope.row.value }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('变量类型')" align="center">
                    <template #default="scope">
                        <el-select v-if="scope.row.__active" v-model="scope.row.type" :size="config.renderConfig.layout.size" class="w-100">
                            <el-option value="string" label="string"></el-option>
                            <el-option value="number" label="number"></el-option>
                            <el-option value="boolean" label="boolean"></el-option>
                        </el-select>
                        <span v-else>{{ scope.row.type }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('创建者')" align="center" prop="creator"></el-table-column>
                <el-table-column :label="$t('操作')" align="center">
                    <template #default="scope">
                        <el-button v-show="!scope.row.__active && !isEditing" type="primary" text @click="handleEdit(scope.row)">{{ $t("编辑") }}</el-button>
                        <el-button v-show="scope.row.__active" type="primary" text @click="handleSubmitEdit(scope.row)">{{ $t("确认") }}</el-button>
                        <el-button v-show="scope.row.__active" type="primary" text @click="handleCancelEdit(scope.row)">{{ $t("取消") }}</el-button>
                        <el-button link type="primary" text @click="handleDelete(scope.row._id)">{{ $t("删除") }}</el-button>
                    </template>
                </el-table-column>
            </s-table>
        </s-fieldset>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import type { ApidocVariable } from "@@/global"

type EditApidocVariable = ApidocVariable & {
    __active?: boolean,
}

export default defineComponent({
    data() {
        return {
            //=====================================请求参数====================================//
            formInfo: {
                name: "", //------------变量名称
                value: "", //-----------变量值
                type: "string", //------------变量类型
            },
            //=====================================表格参数====================================//
            oldEditingData: null,
            //=====================================验证参数====================================//
            rules: {
                name: [{ required: true, message: this.$t("请输入变量名称"), trigger: "blur" }],
                value: [{ required: true, message: this.$t("请输入变量值"), trigger: "blur" }],
            },
            //=====================================其他参数====================================//
            isEditing: false,
            loading: false, //=====================添加按钮加载效果
        };
    },
    methods: {
        getData() {
            this.$refs.table.getData().then((res) => {
                this.$store.commit("apidoc/baseInfo/changeVariables", (res as { data: { rows: ApidocVariable[] } }).data.rows);
            });
            // this.$store.dispatch("apidoc/getDocVariable", {
            //     projectId: this.$route.query.id,
            // });
        },
        //新增表格数据
        handleAddVariable() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    const params = Object.assign(this.formInfo, {
                        projectId: this.$route.query.id,
                    });
                    this.axios.post("/api/project/project_variable", params).then(() => {
                        this.getData();
                    }).catch((err) => {
                        console.error(err);
                    }).finally(() => {
                        this.loading = false;
                    });
                }
            });
        },
        //让当前行处于修改状态
        handleEdit(row: EditApidocVariable) {
            row.__active = true;
            this.isEditing = true;
            this.oldEditingData = JSON.parse(JSON.stringify(row));
        },
        //确认修改当前行
        handleSubmitEdit(row: EditApidocVariable) {
            row.__active = false;
            const params = {
                ...row,
                projectId: this.$route.query.id,
            };
            this.axios.put("/api/project/project_variable", params).then(() => {
                this.$message.success(this.$t("修改成功"));
                this.getData();
                this.isEditing = false;
            }).catch((err) => {
                console.error(err);
            });
        },
        //取消修改
        handleCancelEdit(row: EditApidocVariable) {
            Object.assign(row, this.oldEditingData)
            row.__active = false;
            this.isEditing = false;
        },
        //=====================================删除====================================//
        //删除一个数据
        handleDelete(_id: string) {
            this.$confirm(this.$t("此操作将永久删除该域名, 是否继续?"), this.$t("提示"), {
                confirmButtonText: this.$t("确定"),
                cancelButtonText: this.$t("取消"),
                type: "warning",
            }).then(() => {
                const params = {
                    ids: [_id],
                    projectId: this.$route.query.id,
                };
                this.axios.delete("/api/project/project_variable", { data: params }).then(() => {
                    this.$message.success(this.$t("删除成功"));
                    this.getData();
                }).catch((err) => {
                    console.error(err);
                });
            });
        },
    },
})
</script>

<style lang="scss">
.s-variable {
    overflow-y: auto;
    height: calc(100vh - #{size(100)});
    width: 100%;
    padding: size(20) size(30);
    display: flex;
    .left {
        flex: 0 0 size(400);
        margin-right: size(10);
    }
    .right {
        flex: 1;
    }
}
</style>
